<template>
  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content style="display: flex; align-items: flex-start">
      <dic-list-select v-model="listQuery.params.readState" dic-code="msg_read" title="阅读状态"/>
      <el-input v-model="listQuery.params.receiver" style="width:200px" class="filter-item" placeholder="搜索接收人" size="small" clearable />
    </template>

    <template #data-columns>

      <el-table-column
        label="接收对象"
        align="center"
        prop="receiver"
      />

      <el-table-column
        label="接收用户"
        align="center"
        prop="userId_dictText"
      />

      <el-table-column
        label="阅读时间"
        align="center">

        <template v-slot="scope">
          <span v-if="scope.row.readTime">
            {{ scope.row.readTime }}
          </span>
          <span v-else>--</span>
        </template>

      </el-table-column>

      <el-table-column
        label="状态"
        align="center">
        <template v-slot="scope">
          <el-tag :type="stateFormat(scope.row.readState)">
            <span v-if="scope.row.msgType==1">
              {{ scope.row.readState_dictText }}
            </span>
            <span v-else> -- </span>
          </el-tag>
        </template>
      </el-table-column>

    </template>

  </data-table>
</template>

<script>

export default {
  name: 'MsgRead',
  components: { },
  props: {
    msgId: String,
    state: Number
  },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
          msgId: '',
          readState: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/notify/read/paging'
      }
    }
  },
  watch: {
    msgId: {
      handler(val) {
        this.listQuery.params.msgId = val
      }
    }
  },

  created() {
    this.listQuery.params.msgId = this.msgId
    this.listQuery.params.readState = this.readState
  },
  methods: {

    stateFormat(state) {
      if (state == 0) {
        return 'info'
      }
      if (state == 1) {
        return 'success'
      }
    }
  }
}
</script>
